<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Essay Auto-Formatter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SimSun', '宋体', serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.8;
            padding: 20px;
        }
        
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1.5rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 1px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .input-section {
            margin-bottom: 2rem;
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        }
        
        textarea {
            width: 100%;
            min-height: 300px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1rem;
            white-space: pre;
        }
        
        button {
            padding: 0.8rem 1.5rem;
            background: #8e44ad;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #732d91;
        }
        
        .output-section {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        }
        
        .essay {
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px dashed #eee;
        }
        
        .essay:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .essay-title {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .essay-author {
            text-align: center;
            font-style: italic;
            color: #7f8c8d;
            margin-bottom: 2rem;
        }
        
        .essay-content p {
            margin-bottom: 1.5rem;
            text-indent: 2em;
            text-align: justify;
        }
        
        .essay-content p:first-child {
            text-indent: 0;
        }
        
        .pull-quote {
            font-size: 1.3rem;
            color: #8e44ad;
            font-style: italic;
            padding: 1.5rem;
            margin: 2rem 0;
            border-left: 3px solid #8e44ad;
            background: #f8f5fa;
            text-align: center;
        }
        
        .instructions {
            background: #f0f7ff;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            border-left: 4px solid #8e44ad;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">四中学生作文自动格式化工具</div>
    </header>

    <div class="container">
        <div class="input-section">
            <div class="instructions">
                <h3>使用说明：</h3>
                <ol>
                    <li>将整篇作文（包括标题和作者信息）粘贴到下方文本框</li>
                    <li>点击"格式化"按钮</li>
                    <li>系统会自动识别标题、作者和段落</li>
                    <li>格式化的结果将显示在下方</li>
                </ol>
                <p>提示：可以一次粘贴多篇作文，系统会自动分开处理</p>
            </div>
            <textarea id="rawText" placeholder="请将作文内容粘贴到这里，保持原有格式..."></textarea>
            <button onclick="formatEssay()">格式化</button>
            <button onclick="clearAll()">清空</button>
        </div>
        
        <div class="output-section" id="formattedOutput">
            <!-- 格式化后的内容将出现在这里 -->
        </div>
    </div>

    <script>
        function formatEssay() {
            const rawText = document.getElementById('rawText').value;
            const outputDiv = document.getElementById('formattedOutput');
            outputDiv.innerHTML = '';
            
            if (!rawText.trim()) {
                alert('请先粘贴作文内容');
                return;
            }
            
            // First split by the clear divider pattern (multiple lines with Chinese spaces)
            const essayBlocks = rawText.split(/\n\s*\n\s*\n\s*\n+/);
            
            essayBlocks.forEach(block => {
                if (!block.trim()) return;
                
                const essayDiv = document.createElement('div');
                essayDiv.className = 'essay';
                
                const lines = block.split('\n').map(line => line.trim()).filter(line => line);
                
                // Find title (first non-empty line)
                let title = '';
                let author = '';
                let contentStart = 0;
                
                if (lines.length > 0) {
                    title = lines[0];
                    contentStart = 1;
                    
                    // Look for author in next lines (lines containing class/year info)
                    for (let i = 1; i < Math.min(5, lines.length); i++) {
                        if (lines[i].match(/班|届|级|\([0-9]\)班/)) {
                            author = lines[i];
                            contentStart = i + 1;
                            break;
                        }
                    }
                }
                
                // Create title element
                if (title) {
                    const titleElement = document.createElement('h2');
                    titleElement.className = 'essay-title';
                    titleElement.textContent = title;
                    essayDiv.appendChild(titleElement);
                }
                
                // Create author element
                if (author) {
                    const authorElement = document.createElement('div');
                    authorElement.className = 'essay-author';
                    authorElement.textContent = author;
                    essayDiv.appendChild(authorElement);
                }
                
                // Process content
                const contentDiv = document.createElement('div');
                contentDiv.className = 'essay-content';
                
                // Join remaining lines and split into paragraphs (two newlines)
                const remainingText = lines.slice(contentStart).join('\n');
                const paragraphs = remainingText.split(/\n\s*\n/);
                
                paragraphs.forEach(para => {
                    para = para.trim();
                    if (!para) return;
                    
                    // Check for quotes (lines with quotation marks at start/end)
                    if (para.match(/^["'].*["']$/) || para.match(/^["'].*$/) || para.match(/^[“"].*[”"]$/)) {
                        const quoteDiv = document.createElement('div');
                        quoteDiv.className = 'pull-quote';
                        quoteDiv.textContent = para.replace(/^["'“”]|["'“”]$/g, '');
                        contentDiv.appendChild(quoteDiv);
                    } else {
                        const p = document.createElement('p');
                        p.textContent = para;
                        contentDiv.appendChild(p);
                    }
                });
                
                essayDiv.appendChild(contentDiv);
                outputDiv.appendChild(essayDiv);
            });
        }
        
        function clearAll() {
            document.getElementById('rawText').value = '';
            document.getElementById('formattedOutput').innerHTML = '';
        }
        
        // Example of how to pre-load sample text for testing
        function loadSample() {
            const sampleText = `生命的光辉
高二8 龚菲菲
05届
(8)班
 	
　　 "我们是怎样谈论人的？会不会像天文学家看到的那样只是一点尘埃，无依无靠地在一颗不重要的行星上蠕动？或像化学家所说的是巧妙地摆弄在一起的一堆化学品？或者像在哈姆雷特眼里看到的那样，人在理智上是高贵的，在才能上是无限的？或者兼有以上的一切？"
　　
　　 今天，我们又该怎样谈论灾难面前的人？
　　 自人类诞生以来，回望人类一路走来的历程，我们看到步履间留下了太多灾难的印记。2003年，当前所未有的SARS肆虐过后，很多人开始思索，思索人类的过去，探求人类的未来。
　　 自从人类从荒蛮中崛起的那一刻开始，大自然与人的关系就开始变得矛盾。一方面，人类获得了生存的空间、赖以生活的自然资源，自然给了我们得以去成长的一切，另一方面，它又无情地挑战着人类的生存。我们始终面临着对人类有摧毁意义的各种灾难。于是，我们在感激自然的恩赐的同时，还要去承受它的凌虐。而令今天的人们动容的是，在不断的挑战与应战中，人类已走过了几个千年，人类前进的道路始终没有被任何的灾难所阻断，所以，才有了我们的今天的一切。未来，我们还要 照这样的方式继续。我们今天去重温人类那份一往无前的勇气，要唤回的是一份信心、一种永恒的信念，这也是历经过非典后的无数心灵需要收获的。
　　 公元79年，维苏威火山带给世界一个至今都不能消退的震撼。 庞贝的毁灭是一个惊叹号，但我觉得那更应是一个省略号。当人们还在工作、玩耍，进行他们应该进行的一切之时，铺天盖地的烟灰便于顷刻间覆盖了整座城市。人们瞬间被定格，宛如一件件艺术品。多么荒诞，人类多年创造的灿烂文明，就这样被掩埋，成了大自然的"杰作"！因为没有征兆，所以当他们被凝固的瞬间，还保持着生命最后的姿态。很多事情是来不及说明的，但今天，我们清晰地见到那些保存下来的残迹，我们看到了人类在生死边缘的最后状态，看到了一切。
　　 庞贝的毁灭是惨烈的，自然对人类文明的打击有时就如同这般。文明就在刹那间被深深地伤害，我们曾经的努力显得如此渺小，如此微茫。


别只有希望
高二（8）班魏可嘉
05届
(8)班
 	
　　也许是"人要有希望，要有目标"的目标论听得太多，亦或是我少不更事，人生阅历不足，我总相信人总是要活在希望之中的。否则，人会像行尸走肉一般整天无所事事，前途渺茫，生活也会了无生机。但是，我渐渐发现，只有希望是不够的。翻开初中时写的日记，发现以前写下希望在初中达到的愿望没有几件做到了……

　　相信吸毒的人没有哪个不希望戒掉毒瘾的，但是，又有几个人真正戒掉了呢？又有几对离婚的夫妻在踏上红地毯之际不希望自己的婚姻数十栽之后仍旧充满热情？谁又不希望自己的未来，前途一片光明，可是，能不被困难和自身的惰性打倒的又有几人？

　　难道有希望不好吗？我迷惑了……`;
            
            document.getElementById('rawText').value = sampleText;
        }
        
        // Uncomment to load sample text automatically for testing:
        // window.onload = loadSample;
    </script>
</body>
</html>